import React, { useEffect, useState } from 'react';
import { useHistory } from "react-router-dom";
import {
    Tabs, Toast, Flex, TextareaItem, Button, Badge, DatePicker, List, Radio
} from 'antd-mobile';
import { dateFormat } from "../../../model/code";
import http from "../../../model/http";  
import Header from "../../../components/header/Header";
import './userDetail.less'
import status1 from '../../../libs/img/user/historyStatus1.png'
import status2 from '../../../libs/img/user/historyStatus2.png'
import status3 from '../../../libs/img/user/historyStatus3.png'
import man from '../../../libs/img/user/man.png';
import woman from '../../../libs/img/user/woman.png'; 
import '../../../libs/font/iconfont.css';
const RadioItem = Radio.RadioItem,
    Item = List.Item,
    _now = new Date(),
    tomorrow = new Date(_now.getTime() + 24 * 3600 * 1000);
 
function UserDetail(){
    const history = useHistory(),
        query = http.useQuery(),
        task_id = query.get('taskId'),
        group_id = query.get('groupId');
    const [checkboxVal, setCheckboxVal] = useState(0)
    //日期
    const [date, setDate] = useState("");
    const [mark, setMark] = useState('');
    const [timeShowBool, setTimeShowBool] = useState(false)
    const [timeDataCheckVal, setTimeDataCheckVal] = useState('')

    const [detailInfo, setDetailInfo] = useState({
        call_name:'',
        no_gift_type:[],
        gift_type:[]
    })

    /*渲染完成*/
    useEffect(async () => { 
       
        const result = await http.post('/callcenter/queryCallInfo',{
            callId: history.location.state.detailData.id,
            group_id: history.location.state.detailData.group_id
        })
        setDetailInfo(result)
         
        
        // http://wxwork.gzsg.cn/wxwork/callcenter/setCallType?hosId=1&userId=xxx&managerId=xxx&callId=1&group_id=1&memo=%E6%B5%8B%E8%AF%95%E5%A4%87%E6%B3%A8&type=14&isConfirm=1&mydate=2021-11-10&time=3
        // callId
        // group_id
        // isConfirm   1   -  0// 是否来院
        //     time 1 上午
        //         2
        //         3
        // type // 礼品 id
        // memo

    }, []) 

    const handleSubmit = async () => {
        console.log('触发')
        if (checkboxVal === 0) { Toast.fail('请先选择礼品或其他选项'); return }; 
        // if (mark == '') { Toast.fail('请先填写备注信息'); return }; 
        if (timeShowBool === true) {
            if (date == '') { Toast.fail('请先选择到院日期'); return }; 
            if (timeDataCheckVal == '') { Toast.fail('请先选择到院时间'); return };  
        }; 
        const result = await http.post('/callcenter/setCallType',{
            callId: history.location.state.detailData.id,
            group_id: history.location.state.detailData.group_id,
            task_id: history.location.state.detailData.task_id,
            memo: mark,
            type: checkboxVal,
            isConfirm: timeShowBool ? 1 : 0,
            mydate: date != '' ? dateFormat(date, 'yyyy-MM-dd') : '',
            time: timeDataCheckVal 
        }) 
        if(result.code == 0){
            Toast.success(result.msg)
            // 保存成功的存在本地
            let clientReviewArrID = localStorage.getItem(`clientReviewArrID_${group_id}`) ? JSON.parse(localStorage.getItem(`clientReviewArrID_${group_id}`)) : ''
            
            if(clientReviewArrID == ''){
                localStorage.setItem(`clientReviewArrID_${group_id}`,JSON.stringify([history.location.state.detailData.id]))
            }else{  
                let newData = clientReviewArrID.indexOf(history.location.state.detailData.id)
                if(newData == -1){
                    console.log(clientReviewArrID)
                    clientReviewArrID.push(history.location.state.detailData.id) 
                    localStorage.setItem(`clientReviewArrID_${group_id}`, JSON.stringify(clientReviewArrID))  
                } 
            }
            history.push(`/clientReview/eventInvitation/userList?taskId=${task_id}&groupId=${group_id}`)
        }else{
            Toast.fail(result.msg)
        }

        
    }

    // 切换是否到院
    const showTimeClick = (bool) => {
        setTimeShowBool(bool)
        setDate('')
        setTimeDataCheckVal('')   
    }
    // 网络拨打
    const networkClick = () => {
        
        Toast.fail('即将上线，敬请期待');
    }

    // 本机拨号
    const dialingClick = () => {
        window.location.href = "tel: " + detailInfo.mobile
    }
    return (
        <div className="v-client-review-user-detail">
            <div className="box-header">
                <p>{detailInfo.call_name}</p>
                <Button className="box-header-btn" type="primary" onClick={() => dialingClick()}>本 机 拨 号</Button>
                <Button className="box-header-btn" type="warning" onClick={() => networkClick()}>网 络 拨 打</Button>
            </div>
            <div className="box-content">
                <div className="box-content-checkbox">
                    <div className="box-content-checkbox-title">
                        <p>礼品选项</p>
                        <span>最多选择1项</span>
                    </div>
                    <div className="box-content-checkbox-content">
                        {detailInfo.gift_type.length > 0 && detailInfo.gift_type.map(item => (
                            <List>
                                <RadioItem key={item.id} checked={checkboxVal == item.id} onChange={() => {
                                    setCheckboxVal(item.id) 
                                }}>
                                    {item.typename}
                                </RadioItem>
                            </List>
                        ))}
                        
                    </div>
                    <div className="box-content-checkbox-title">
                        <p>其他选项</p>
                        <span>最多选择1项</span>
                    </div>
                    <div className="box-content-checkbox-content">
                        {detailInfo.no_gift_type.length > 0 && detailInfo.no_gift_type.map(item => (
                            <List>
                                <RadioItem key={item.id} checked={checkboxVal == item.id} onChange={() => {
                                    setCheckboxVal(item.id) 
                                }}>
                                    {item.typename}
                                </RadioItem>
                            </List>
                        ))} 
                    </div>  
                </div>
                {/* 底下内容 */}
                <div style={{backgroundColor:'#e3e3e1',height:'10px'}}></div>
                <div className="box-footer-input">
                    <p>顾客是否确认到院时间</p>
                    <div className="small-box">
                        <div className="check-time-box">
                            <span>是</span>
                            <Radio className="my-radio" checked={timeShowBool == true} onChange={e => showTimeClick(true)}></Radio>
                        </div>
                        <div className="check-time-box">
                            <span>否</span>
                            <Radio className="my-radio" checked={timeShowBool == false} onChange={e => showTimeClick(false)}></Radio>
                        </div>
                    </div>
                </div>
                {timeShowBool && (
                    <div>
                        <div className="time-box">
                            <DatePicker mode="date" value={date} extra='请选择'
                                minDate={_now} onOk={(d) => setDate(d)}>
                                <Item arrow="horizontal"><Flex>请选择意向到院日期</Flex></Item>
                            </DatePicker>
                        </div>
                        <div className="box-footer-input">
                            <p>到院时间</p>
                            <div className="small-box">
                                <div className="check-time-box">
                                    <span>上午</span>
                                    <Radio className="my-radio" checked={timeDataCheckVal == 1} onChange={e => setTimeDataCheckVal(1)}></Radio>
                                </div>
                                <div className="check-time-box">
                                    <span>下午</span>
                                    <Radio className="my-radio" checked={timeDataCheckVal == 2} onChange={e => setTimeDataCheckVal(2)}></Radio>
                                </div>
                                <div className="check-time-box">
                                    <span>不确定</span>
                                    <Radio className="my-radio" checked={timeDataCheckVal == 3} onChange={e => setTimeDataCheckVal(3)}></Radio>
                                </div>
                            </div>
                        </div>
                    </div>
                )}
                
                <div className='mark-style'>
                    <TextareaItem value={mark} rows={5} count={100} className="input-css" onChange={setMark} placeholder='请输入备注信息...' />
                </div>
            </div>
            <Button className="footer-btn"  type="primary" onClick={() => handleSubmit()}>提交拨打结果</Button>
            <Header />
        </div>
    )

}
export default UserDetail;